<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>个人中心</title>
	<style>
		 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: #444;
      background-color: #ddeef2
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      height: 80px;
      line-height: 80px;
      border-bottom: 2px solid #ccc;
      display: flex;
      justify-content: space-between;
    }

    .header h1 {
      display: inline-block;
      font-size: 48px;
      font-weight: bold;
      margin-left: 20px;
      vertical-align: middle;
    }
    
    .btn {
	  padding: 10px;
	  background-color: #007bff;
	  color: #fff;
	  border-radius: 5px;
	  text-decoration: none;
	  margin-left: 20px;
	}

    .nav {
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #ccc;
      display: flex;
    }

    .nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav li {
      display: inline-block;
      margin-right: 10px;
    }

    .nav a {
      color: #666;
      text-decoration: none;
      padding: 0 14px;
      border-radius: 4px;
      transition: all .3s ease;
    }

    .nav a:hover {
      color: #fff;
      background-color: #666;
    }
    .search-container {
	  display: flex;
	  align-items: center;
	  margin-left: auto;
	  padding-right: 20px;
	}
	
	.search-input {
	  border: none;
	  border-radius: 20px;
	  padding: 5px 10px;
	  font-size: 14px;
	}
	
	.search-button {
	  background-color: #007bff;
	  color: #fff;
	  border: none;
	  border-radius: 20px;
	  padding: 5px 10px;
	  margin-left: 5px;
	  cursor: pointer;
	}

    .banner {
      height: 300px;
      position: relative;
      overflow: hidden;
    }

    .banner img {
      width: 100%;
    }

    .banner .caption {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    }

    .news-list {
      margin: 30px 0;
    }

    .news-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .news-item img {
      width: 160px;
      height: 120px;
      margin-right: 20px;
    }

    .news-item h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .news-item p {
      font-size: 16px;
      line-height: 1.5em;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .news-item a {
      color: #444;
      text-decoration: none;
    }

    .news-item a:hover {
      text-decoration: underline;
    }

    .footer {
      height: 60px;
      line-height: 60px;
      border-top: 2px solid #ccc;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
    .icon {
        width: 25px;
        margin: 5px 3px;
        padding-top:5px;
        line-height: 33.3px;
        text-align: center;
    }
    .no-hover:hover {
	color: initial !important;
	background-color: initial !important;
	}
	.user-name-label {
	  font-weight: bold;
	}
	
	.user-name {
	  color: #333;
	  font-size: 20px;
	}

		.hh {
			text-align: center;
			font-size: 36px;
			color: white;
			margin-top: 50px;
		}

		.person {
		  position: absolute;
		  top: 40%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background: #0072c6;
		  width: 40%;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		}

		.userinfo {
			font-size: 24px;
			color: white;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
		}

		.avatar {
			width: 60px;
			height: 60px;
			background: #fff;
			border-radius: 50%;
			margin-right: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24px;
			color: #555;
		}

		.username {
			font-size: 28px;
			color: white;
		}

		.button {
			display: inline-block;
			padding: 10px 16px;
			font-size: 18px;
			font-weight: bold;
			color: #fff;
			background-color: #00aeef;
			border-color: #0096d8;
			border-radius: 6px;
			text-decoration: none;
			margin-bottom: 20px;
			transition: all .3s ease-in-out;
		}

		.button:hover {
		    background: linear-gradient(to bottom, #00a2e1 0%, #0079bf 100%);
		    text-shadow: 0 1px rgba(0,47,127,.5);
		    cursor: pointer;
		    transform: translateY(-2px);
		    box-shadow: 0 2px 5px rgba(0,0,0,.1);
		}

	</style>

	<!-- 依赖 -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
	<!-- 页面内容 -->
	<div class="background-container">
		
	</div>
	<div class="container">
	<div class="header">
  <h1>新闻网</h1>
  <div class="btn-group">
  <% String userName = (String) session.getAttribute("username"); %>
      <% if (userName == null || "".equals(userName)) { //未登录情况，显示登录和注册按钮%>
    <a href="log.jsp?referer=<%= request.getRequestURL() %>" class="btn">登录</a>
    <a href="reg.jsp?referer=<%= request.getRequestURL() %>" class="btn">注册</a>
    <% } else { //登录情况，显示用户信息%>
        <span class="user-name-label">用户名：</span>
		<span class="user-name"><%=userName%></span>
		<a href="index.jsp" class="btn">返回首页</a>
         <a href="person.jsp" class="btn">个人中心</a>
          <a href="QuitServlet" class="btn">退出</a>
      <% } %>
    </div>
  </div>

    <div class="nav">
  <nav class="nav">
     <ul class="nav-list">
        <li><a href="typenew.jsp?type=1">国内新闻</a></li>
        <li><a href="typenew.jsp?type=2">国际新闻</a></li>
        <li><a href="typenew.jsp?type=3">娱乐新闻</a></li>
        <li><a href="typenew.jsp?type=4">体育新闻</a></li>
        <li><a href="typenew.jsp?type=5">军事新闻</a></li>
      </ul>
  </nav>
  <div class="search-container">
    <input type="text" class="search-input" placeholder="请输入关键词">
      <div class="icon">
      <a id="find" class="no-hover" href="searchnew.jsp">
    <svg t="1659685131507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2555" width="32" height="32"><path d="M454.656 849.92C231.424 849.92 51.2 668.672 51.2 445.44 51.2 223.232 231.424 41.984 454.656 41.984c222.208 0 403.456 181.248 403.456 403.456C858.112 668.672 676.864 849.92 454.656 849.92z m0-746.496C266.24 103.424 112.64 257.024 112.64 445.44s153.6 342.016 342.016 342.016 342.016-153.6 342.016-342.016-153.6-342.016-342.016-342.016z" fill="#4C4C4C" p-id="2556"></path><path d="M942.08 1008.64c-12.288 0-23.552-4.096-32.768-13.312L737.28 822.272c-18.432-18.432-18.432-47.104 0-65.536s47.104-18.432 65.536 0l172.032 172.032c18.432 18.432 18.432 47.104 0 65.536-9.216 9.216-20.48 14.336-32.768 14.336z" fill="#FFA028" p-id="2557"></path></svg>
    </a>
    </div>
  </div>
  </div>
  <script>
  const searchInput = document.querySelector('.search-input');
const searchLink = document.querySelector('#find');

searchLink.addEventListener('click', function(event) {
  if (searchInput.value === '') {
    event.preventDefault(); // 阻止默认的超链接点击行为
    alert('请先输入关键字再进行搜索！');
  } else {
    event.preventDefault();
    const keyword = encodeURIComponent(searchInput.value);
    searchLink.href = 'searchnew.jsp?keyword=' + keyword;
    window.location.href = searchLink.href; // 立即跳转
  }
});
  </script>
  <div class="person">
		<h1 class="hh">个人中心</h1>
		<div class="userinfo">
			<div class="avatar">User</div>
			<div class="username"><%= session.getAttribute("username") %></div>
		</div>
		<a href='upd.jsp?username=<%= session.getAttribute("username") %>' class='button'>修改密码</a>
	</div>
	</div>
	
</body>
</html>